<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="google" value="notranslate" />
    <title>Blockly Demo: RTL</title>
    <script src="./node_modules/blockly/blockly_compressed.js"></script>
    <script src="./node_modules/blockly/blocks_compressed.js"></script>
    <script src="./node_modules/blockly/msg/ar.js"></script>
    <style>
      body {
        background-color: #fff;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }
      #blocklyDiv {
        height: 600px;
        width: 800px;
      }
    </style>
    <script>
      function init() {
        const toolbox = {
          kind: 'categoryToolbox',
          contents: [
            {
              kind: 'category',
              name: 'منطق',
              colour: '%{BKY_LOGIC_HUE}',
              contents: [
                {
                  kind: 'block',
                  type: 'controls_if',
                },
                {
                  kind: 'block',
                  type: 'logic_compare',
                },
                {
                  kind: 'block',
                  type: 'logic_operation',
                },
                {
                  kind: 'block',
                  type: 'logic_negate',
                },
                {
                  kind: 'block',
                  type: 'logic_boolean',
                },
                {
                  kind: 'block',
                  type: 'logic_null',
                },
                {
                  kind: 'block',
                  type: 'logic_ternary',
                },
              ],
            },
            {
              kind: 'category',
              name: 'الحلقات',
              colour: '%{BKY_LOOPS_HUE}',
              contents: [
                {
                  kind: 'block',
                  type: 'controls_repeat_ext',
                  inputs: {
                    TIMES: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 10,
                        },
                      },
                    },
                  },
                },
                {
                  kind: 'block',
                  type: 'controls_whileUntil',
                },
                {
                  kind: 'block',
                  type: 'controls_for',
                  inputs: {
                    FROM: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 1,
                        },
                      },
                    },
                    TO: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 10,
                        },
                      },
                    },
                    BY: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 1,
                        },
                      },
                    },
                  },
                },
                {
                  kind: 'block',
                  type: 'controls_forEach',
                },
                {
                  kind: 'block',
                  type: 'controls_flow_statements',
                },
              ],
            },
            {
              kind: 'category',
              name: 'رياضيات',
              colour: '%{BKY_MATH_HUE}',
              contents: [
                {
                  kind: 'block',
                  type: 'math_number',
                },
                {
                  kind: 'block',
                  type: 'math_arithmetic',
                },
                {
                  kind: 'block',
                  type: 'math_single',
                },
                {
                  kind: 'block',
                  type: 'math_trig',
                },
                {
                  kind: 'block',
                  type: 'math_constant',
                },
                {
                  kind: 'block',
                  type: 'math_number_property',
                },
                {
                  kind: 'block',
                  type: 'math_round',
                },
                {
                  kind: 'block',
                  type: 'math_on_list',
                },
                {
                  kind: 'block',
                  type: 'math_modulo',
                },
                {
                  kind: 'block',
                  type: 'math_modulo',
                },
                {
                  kind: 'block',
                  type: 'math_constrain',
                  inputs: {
                    LOW: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 1,
                        },
                      },
                    },
                    HIGH: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 100,
                        },
                      },
                    },
                  },
                },
                {
                  kind: 'block',
                  type: 'math_random_int',
                  inputs: {
                    FROM: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 1,
                        },
                      },
                    },
                    TO: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 100,
                        },
                      },
                    },
                  },
                },
                {
                  kind: 'block',
                  type: 'math_random_float',
                },
                {
                  kind: 'block',
                  type: 'math_atan2',
                },
              ],
            },
            {
              kind: 'category',
              name: 'نص',
              colour: '%{BKY_TEXTS_HUE}',
              contents: [
                {
                  kind: 'block',
                  type: 'text',
                },
                {
                  kind: 'block',
                  type: 'text_join',
                },
                {
                  kind: 'block',
                  type: 'text_append',
                  inputs: {
                    TEXT: {
                      kind: 'block',
                      type: 'text',
                    },
                  },
                },
                {
                  kind: 'block',
                  type: 'text_length',
                },
                {
                  kind: 'block',
                  type: 'text_isEmpty',
                },
                {
                  kind: 'block',
                  type: 'text_indexOf',
                },
                {
                  kind: 'block',
                  type: 'text_charAt',
                },
                {
                  kind: 'block',
                  type: 'text_changeCase',
                },
                {
                  kind: 'block',
                  type: 'text_trim',
                },
                {
                  kind: 'block',
                  type: 'text_print',
                },
                {
                  kind: 'block',
                  type: 'text_prompt_ext',
                  inputs: {
                    TEXT: {
                      kind: 'block',
                      type: 'text',
                    },
                  },
                },
              ],
            },
            {
              kind: 'category',
              name: 'قوائم',
              colour: '%{BKY_LISTS_HUE}',
              contents: [
                {
                  kind: 'block',
                  type: 'lists_create_empty',
                },
                {
                  kind: 'block',
                  type: 'lists_create_with',
                },
                {
                  kind: 'block',
                  type: 'lists_repeat',
                  inputs: {
                    NUM: {
                      block: {
                        type: 'math_number',
                        fields: {
                          NUM: 5,
                        },
                      },
                    },
                  },
                },
                {
                  kind: 'block',
                  type: 'lists_length',
                },
                {
                  kind: 'block',
                  type: 'lists_isEmpty',
                },
                {
                  kind: 'block',
                  type: 'lists_indexOf',
                },
                {
                  kind: 'block',
                  type: 'lists_getIndex',
                },
                {
                  kind: 'block',
                  type: 'lists_setIndex',
                },
              ],
            },
            {
              kind: 'sep',
            },
            {
              kind: 'category',
              name: 'متغيرات',
              custom: 'VARIABLE',
              colour: '%{BKY_VARIABLES_HUE}',
            },
            {
              kind: 'category',
              name: 'إجراءات',
              custom: 'PROCEDURE',
              colour: '%{BKY_PROCEDURES_HUE}',
            },
          ],
        };

        const workspace = Blockly.inject('blocklyDiv', {
          media: './node_modules/blockly/media/',
          rtl: true,
          toolbox: toolbox,
        });
        Blockly.Xml.domToWorkspace(
          document.getElementById('startBlocks'),
          workspace,
        );
        // window.onbeforeunload = function() {
        //   return 'Leaving this page will result in the loss of your work.';
        // };
      }
    </script>
  </head>
  <body onload="init()">
    <div id="blocklyDiv"></div>

    <xml
      xmlns="https://developers.google.com/blockly/xml"
      id="startBlocks"
      style="display: none">
      <block type="controls_if" inline="false" x="50" y="50">
        <value name="IF0">
          <block type="logic_compare" inline="true">
            <field name="OP">LT</field>
            <value name="A">
              <block type="variables_get">
                <field name="VAR">x</field>
              </block>
            </value>
            <value name="B">
              <block type="math_number">
                <field name="NUM">256</field>
              </block>
            </value>
          </block>
        </value>
        <statement name="DO0">
          <block type="variables_set" inline="false">
            <field name="VAR">x</field>
            <value name="VALUE">
              <block type="math_number">
                <field name="NUM">0</field>
              </block>
            </value>
            <next>
              <block type="text_print" inline="false">
                <value name="TEXT">
                  <block type="text">
                    <field name="TEXT">أكثر من لعبة</field>
                  </block>
                </value>
              </block>
            </next>
          </block>
        </statement>
      </block>
    </xml>
  </body>
</html>
